<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      <div id="app">
          <div class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
                <span class="navbar-brand">SMS</span>
                <span class="navbar-text">欢迎使用</span>
                <div class="ml-auto">
                    <span class="navbar-text">欢迎登陆【admin】</span>
                    <a href="#" class="navbar-text">退出</a>
                </div>
            </div>
            
        <div class="container-fluid pt-5 vh-100">
            <div class="row vh-100">
                <div class="col-3 p-0 h-100">
                    <card title="内容管理" class="p-0 h-100 rounded-0" header-class="bg-white">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item" v-for="nav,index in navs" :key="index">
                                <router-link :to="nav.path">{{nav.title}}</router-link>
                            </li>
                        </ul>
                    </card>
                </div>
                <div class="col-9 p-0">
                    <router-view></router-view>
                </div>
            </div>
        </div>
      </div>
      <template id="card">
        <div class="card">
            <div class="card-header" :class='headerClass'>
                <h3 class="card-title">{{title}}</h3>
            </div>
            <div class="card-body" :class="bodyClass">
                <slot></slot>
            </div>
            <div class="card-footer"></div>
        </div>
      </template>
      <template id="articleList">
          <card title="文章列表" class="p-0 border-0" header-class="bg-white border-0">
              <table class="table table-bordered ">
                  <thead class="table-dark text-center ">
                      <tr>
                          <th>序号</th>
                          <th>标题</th>
                          <th>类目</th>
                          <th>热门</th>
                          <th>操作</th>
                      </tr>
                  </thead>
                  <tbody class="text-center table-hover" >
                      <tr v-for="article,index in articles" :key='index'>
                          <td>{{index+1}}</td>
                          <td>{{article.title}}</td>
                          <td >{{categories[article.category].title}}</td>
                          <td><custom-switch :data-id="`hot${index}`" v-model="article.hot"></custom-switch></td>
                          <td>
                                <router-link class="btn btn-primary btn-sm" :to='`/article/edit/${index}`'>编辑</router-link>
                                <button class="btn btn-danger btn-sm" @click="del(index)">删除</button>
                          </td>
                      </tr>
                  </tbody>
              </table>
          </card>
      </template>
      <template id="articleEdit">
            <card title="新增文章" class="p-0 border-0" header-class="bg-white border-0">
                <form>
                    <form-group-input label-text="标题:" placeholder="请输入标题" v-model="article.title"></form-group-input>
                    <form-group-select label-text="类目:" :options="categories" v-model="article.category"></form-group-select>
                    <form-group-switch label-text="热门:" data-id="hot" v-model="article.hot"></form-group-switch>
                    <div class="form-group row">    
                        <button class="btn btn-primary offset-3" @click="submit" type="button">提交</button>
                    </div>
                </form>
            </card>
      </template>
      <template id="formGroupInput">
        <div class="form-group row">
            <label :for="dataId " class="col-3 text-right col-form-label">{{labelText}}</label>
            <input :type="type" :id="dataId" class="col-8 form-control" :placeholder="placeholder" :value="value" @input="$emit('input',$event.target.value)">
        </div>
      </template>
      <template id="formGroupSelect">
        <div class="form-group row">
                <label :for="dataId " class="col-3 text-right col-form-label">{{labelText}}</label>
               <select class="col-8 form-control" @change="$emit('change',$event.target.value)">
                    <option v-for="option,index in options" :value="option.value" :selected="option.value == value">
                        {{option.title}}
                    </option>
               </select>
        </div>
      </template>
      <template id="formGroupSwitch">
        <div class="form-group row">
            <label :for="dataId" class="col-3 text-right col-form-label">{{labelText}}</label>
            <custom-switch :data-id="dataId" class="mt-2" @change="$emit('change1',checked)" :checked="checked"></custom-switch>
        </div>
      </template>
      <template id="customSwitch">
          <div class="custom-control custom-switch">
              <input type="checkbox" class="custom-control-input" :id="dataId" :checked="checked" @change="$emit('change',$event.target.checked)">
              <label :for="dataId" class="custom-control-label"></label>
          </div>
      </template>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script> 
        const navs =[
            {path:'/article/edit',title:'新增文章'},
            {path:'/article/list',title:'文章列表'}
        ]

        Vue.component('formGroupInput',{
            template:"#formGroupInput",
            props:{
                value:{
                    default:''
                },
                labelText:{
                    default:''
                },
                type:{
                    default:'text'
                },
                dataId:{
                    default:''
                },
                placeholder:{
                    default:''
                }
            },
            model:{
                prop:'value',
                event:'input'
            }
        })

        Vue.component('formGroupSelect',{
            template:'#formGroupSelect',
            props:{
                dataId:{
                    default:''
                },
                labelText:{
                    default:''
                },
                options:{
                    default:function(){
                        return []
                    }
                },
                value:{
                    default:0
                }
            },
            model:{
                prop:'value',
                event:'change'
            }
        })

        Vue.component('formGroupSwitch',{
            template:'#formGroupSwitch',
            props:{
                dataId:{
                    default:''
                },
                labelText:{
                    default:''
                },
                checked:{
                    checked:false
                }
            },
            model:{
                prop:'checked',
                event:'change1'
            },
            methods:{
                change(checked){
                    this.$emit('change2',checked)
                }
            }
        })

        Vue.component('customSwitch',{
            template:'#customSwitch',
            props:{
                dataId:{
                     default:''
                },
                checked:{
                 default:true
                }
            },
            model:{
                prop:'checked',
                event:'change'
            }
        })

        const categories =[
            {title:'默认',value:0},
            {title:'栏目一',value:1},
            {title:'栏目二',value:2},
            {title:'栏目三',value:3}
        ]

        const articles =[
            {title:'标题一',category:1,hot:true},
            {title:'标题二',category:2,hot:true},
            {title:'标题三',category:3,hot:false}
        ]

        Vue.component('card',{
            template:'#card',
            props:{
                title:{
                    default:''
                },
                headerClass:{
                    default:''
                },
               bodyClass:{
                   default:''
               }
            }
        })
        const articleList ={
            template:'#articleList',
            data:function(){
                return{
                    articles:articles,
                    categories:categories
                }
            },
            methods: {
                del(index){
                    if(window.confirm("确认删除")){
                        this.articles.splice(index,1)
                    }
                }
            },
        }
        const articleEdit ={
            mounted() {
                let id = this.$route.params.id
                if(id != undefined){
                    this.article = articles[id]
                }
            },
            template:'#articleEdit',
            data:function(){
                return{
                    article:{title:'',category:0,hot:false},
                    categories:categories
                }
            },
            methods:{
                submit(){
                    if(this.$route.params.id === undefined){
                       articles.push(this.article)
                    }
                    this.$router.push({path:'/article/list'})
                }
            }
        }

        let app = new Vue({
            router:new VueRouter({
                routes:[
                    {path:'/article/list',component:articleList},
                    {path:'/article/edit/:id?',component:articleEdit}
                ]
            }),
            el:'#app',
            data:{
                navs:navs
            }
        })
    </script>
</body>
</html>